<template>
	   <div>
		    <ul id="table">
		    	<li v-for="(item,index) in arrayli" :key="index" class="pm">
						<span @mousedown.prevent="onmous(index)" >{{index+1}}</span>
						<div>{{item.title}}</div>
					</li>
		    </ul>
		 </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'

export default {
	name:"dragul",
	props: {
	  list:{
	    type: Array,
	    default:function(){
				return []
			}
	  }
	},
	data(){
		return{
			arrayli:[],
			oldIndex:0,
			dragIndex:-1,
			originalOrder:[],
			spm:""
		}
	},
	mounted() {
		this.arrayli=this.list.slice(0,7)
	},
	created () {
		
	},
	methods: {
		onmous(index){
			this.oldIndex=index;
				var _this = this;
				var divEle = document.getElementById("table");
				var X = divEle.getBoundingClientRect().left;//280 20　　
				var Y = divEle.getBoundingClientRect().top;
				var sHeight =divEle.offsetHeight; //中间大盒子真实高度
				console.log(sHeight)
				this.originalOrder = JSON.stringify(this.arrayli) //临时保存原始数据
				var aSpan = document.createElement("span"); //创建拖拽的色块
				var oBody = document.getElementsByTagName("body")[0];
				aSpan.id = "dragSpan";
				oBody.appendChild(aSpan);
				let sp=false
				document.onmousemove = function(e) {
						var e = e || window.event; //兼容ie浏览器
						var left = e.clientX -X ;
						var top = e.clientY -Y;
            console.log("pk.",e.clientY)
						if(left<0){
							left=X
						}else if(left<100){
							left =left+X;
						}else if(left>=100-30){
							left =X+100-30;
						}
						if(top < 0) {
								top=Y;
						}else if(top>=sHeight-50) {
								top =sHeight+Y-50;
						}else if(top<sHeight) {
								top =top+Y;
						}

					  var distance = e.clientY - Y - 10; //distance 是拖拽的距离
						this.spm=distance
						if (distance > 0) {
								_this.dragIndex = Math.floor(distance / 50); //获取拖拽的行数
						}
						aSpan.style.left = left+ "px"; // 设置拖拽图标的样式
						aSpan.style.top = top + "px";
						aSpan.style.position = "fixed";
						aSpan.style.display = "block";
						aSpan.style.width = "30px";
						aSpan.style.height = "50px";
						aSpan.style.background = "gray";
						aSpan.style.zIndex = 9999;
						aSpan.style.cursor = "move"
				}
				document.onmouseup = function(e) {
					document.onmousemove = null;
					_this.oldIndex = 0;//index
					_this.dragIndex = -1;//获取到的 index
					oBody.removeChild(aSpan);//删除 span
					document.onmouseup = null;
				}
		}
	},
	computed:{
	
	},
	watch:{
		"dragIndex": function(newVal, oldVal) {
			  var newOrder = JSON.parse(this.originalOrder)
				if (this.dragIndex >= this.list.length || this.dragIndex < 0) {
						return false;
				}
				var selectEle = newOrder[this.oldIndex];
				newOrder.splice(this.oldIndex, 1);
				newOrder.splice(this.dragIndex, 0, selectEle);
				this.arrayli=newOrder
		}
	},
	components:{

  }
	
}

</script>

<style scoped >
		ul{width: 400px; border: 1px  solid salmon; margin: 20px auto; }
		.pm{width: 400px; height: 50px; line-height: 50px; display: flex; align-items: center; color: #fff;  border-bottom: 1px solid seashell;}
		.pm span{ cursor: pointer; display: block; width: 40px; text-align: center; line-height: 50px;  }
		.pm div{flex: 1;}
</style>

